<template>
  <div>
    <div v-for="(item, idx) in list" :key="idx" class="list-data">
      <div class="top">
        <div class="top-name">
          <div>{{ item.workUnit }}</div>
          <div>{{ item.position }}</div>
        </div>
        <div class="top-edit">
          <van-icon class="one" name="edit" @click="clickEdit(item)" />
          <van-icon class="two" name="delete-o" @click="clickDelete(item.workUnit)" />
        </div>
      </div>
      <div class="topTwo">
        <div>{{ item.startTime }}-{{ item.endTime }}</div>
      </div>
      <div class="topThree">
        <div>证明人</div>
        <div>{{ item.certifier }}</div>
      </div>
      <div class="topThree">
        <div>证明人电话</div>
        <div>{{ item.mobile }}</div>
      </div>
      <div class="bottom">
        <div>离职原因</div>
        <div>{{ item.reasonLeave }}</div>
      </div>
    </div>
    <work-form ref="workForm" @workValue="workValue" />
  </div>
</template>
<script>
import workForm from './work-form.vue'
import Dialog from '@/wxcomponents/vant/dialog/dialog'
export default {
  components: { workForm },
  props: {
    workList: {
      type: Array,
    },
  },
  data() {
    return {
      list: this.workList,
    }
  },
  watch: {
    workList: {
      handler(newVal, oldVal) {
        this.list = newVal
      },
    },
  },
  methods: {
    // 编辑
    clickEdit(item) {
      this.$refs.workForm.edit(item)
    },
    workValue(item) {
      if (!item.isEdit) {
        this.list.push(item)
      }
      this.$emit('experienceList', this.list)
    },
    // 删除
    clickDelete(name) {
      Dialog.confirm({
        title: '标题',
        message: '确定删除？',
      }).then(() => {
        for (const [idx, item] of this.list.entries()) {
          if (name === item.workUnit) {
            this.list.splice(idx, 1)
          }
        }
        this.$emit('experienceList', this.list)
      }).catch(() => {
        console.log('取消')
      })
    },
    open() {
      this.$refs.workForm.open()
    },
  },
}
</script>
<style lang="scss" scoped>
.list-data{
  width: 93%;
  height:155px;
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
  border-radius: 2px;
  margin: 10px auto;
  .top{
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 5px 10px;
    .top-name{
      display: flex;
      align-items: center;
      div:nth-child(1){
        color:#333;
        font-size: 16px;
        font-weight: 600;
      }
      div:nth-child(2){
        font-size: 14px;
        color:#739ECA;background:#f1f5f9;
        border:1px solid #b2c9e2;
        margin-left: 10px;
        height: 16px;
        line-height: 16px;
        padding: 0px 3px;
      }
    }
    .top-edit{
      .one{
        color:#739ECA
      }
      .two{
        color:red;
        margin-left:5px;
      }
    }
  }
  .topTwo{
    display: flex;
    font-size: 12px;
    color: #999;
    padding: 0px 10px 0px 10px;
    height: 13px;
    line-height: 13px;
    div:nth-child(1){
        padding-right:5px;
    }
  }
  .topThree,.bottom{
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 5px 10px;
    font-size: 14px;
    color:#333;
  }
}
</style>
